<template>
  <div class="index-card" v-on:click="goDetail">
    <div class="img-container">
      <img :src="value.avatar"/>
    </div>
    <div class="teacher-info">
      <div class="teacher-name">
        <a class="name" :alt="value.name">{{value.name}}</a>
        <a class="intro" :alt="value.job_level">{{value.job_level}}</a>
      </div>
      <div class="address">
        <i class="ion-android-pin"></i>
        {{value.city}}
      </div>
    </div>
  </div>
</template>

<script>
  import timg from '@/assets/mock_images/teacher.png';
  export default {
    name: 'IndexCard',
    data() {
      return {
        timg
      }
    },
    methods: {
      goDetail() {
        this.$router.push('/teacher/' + this.value.id)
      }
    },
    props: {
      value: {
        type: Object,
        default: function() {
          return { name: '获取失败' }
        }
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .index-card {
    position: relative;
    width: 220px;
    height: 320px;
    margin: 10px;
    float: left;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0px 0px 20px rgba(218, 218, 218, 0.5);
    transition: all .5s;
    cursor: pointer;
    &:hover {
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
      .img-container {
        img{
          transform: scale(1.1);
        }
      }
    }
    .img-container {
      height: 240px;
      width: 220px;
      overflow: hidden;
      img{
        height: 240px;
        width: 220px;
        transition: all .5s;
      }
    }
    .teacher-info {
      padding: 10px 16px;
      .teacher-name {
        height: 30px;
        line-height: 30px;
        .name {
          font-weight: bold;
          font-size: 16px;
        }
        .intro{
          color: #999999
        }
      }
      .address{
        height: 30px;
        line-height: 30px;
        font-size: 12px;
        color: #666;
        >i.ion-android-pin{
          color: #00A2EA;
        }
      }
    }
  }
</style>


